import { useLayoutEffect, useState } from 'react';
import { Mask, Switch } from 'antd-mobile';
import clsx from 'clsx';
import styles from './index.module.less';
import HistoryMask from './HistoryMask';
import socket from '@/socket';
import GameRulesMask from './GameRulesMask';
import GameLimits from './GameLimits';
import { useRecoilState } from 'recoil';
import { CONFIG } from '../../../state';

interface Props {
  visible: boolean;
  onClose: (value?: number) => void;
}

const MenuMask: React.FC<Props> = ({ visible, onClose }) => {
  const [historyMaskVisible, sethistoryMaskVisible] = useState(false);
  const [gameRulesMaskVisible, setGameRulesMaskVisible] = useState(false);
  const [GameLimitsVisible, setGameLimitsVisible] = useState(false);
  const [CONFIGState, setCONFIGState] = useRecoilState(CONFIG);


  return (
    <Mask
      opacity={0}
      visible={visible}
      onMaskClick={() => onClose()}
    >
      <div
        className={styles.MenuMask}
      // style={{
      //   top: offset?.top,
      //   left: offset?.left,
      // }}
      >
        <HistoryMask
          visible={historyMaskVisible}
          onClose={() => sethistoryMaskVisible(false)}
        />
        <GameRulesMask
          visible={gameRulesMaskVisible}
          onClose={() => setGameRulesMaskVisible(false)}
        />
        <GameLimits
          visible={GameLimitsVisible}
          onClose={() => setGameLimitsVisible(false)}
        />
        <div className={styles.titlte}>8proc 3771579</div>
        <div className={clsx(styles.listItem, styles.justyContent)}>
          <div className={styles.sound}>
            <div className={styles.icon}>
            </div>
            <div className={styles.text}>
              Sound
            </div>
          </div>
          <Switch
            checked={CONFIGState.sound}
            style={{ "--width": '40px', "--height": '20px' }}
            onChange={(e) => {
              console.log(e, '-------');
              setCONFIGState({
                sound: e,
              })
            }}
          />
        </div>
        <div className={clsx(styles.listItem)}
          onClick={() => {
            // 赔率信息
            socket.send({
              msgType: 'BET_HISTORY', body: { pageNo: 1 }
            });
            sethistoryMaskVisible(true);
          }}>
          <div className={styles.clock}>
          </div>
          <div className={styles.text}>
            Bets History
          </div>
        </div>
        <div className={clsx(styles.listItem)}
          onClick={() => {
            setGameRulesMaskVisible(true)

          }}>
          <div className={styles.rule}>
          </div>
          <div className={styles.text}>
            Game Rules
          </div>
        </div>
        <div className={clsx(styles.listItem)}
          onClick={() => {
            setGameLimitsVisible(true);
          }}
        >
          <div className={styles.limit}>
          </div>
          <div className={styles.text}>
            Game Limits
          </div>
        </div>
      </div>
    </Mask>
  );
};

export default MenuMask;
